<template>
  <div class="recSongList">
    <ul class="list-content" v-for="item in RecSongList" :key="item.content_id">
      <li @click="selectAblum(item)">
        <div class="img">
          <img v-lazy="item.cover"/>
        </div>
        <div class="msg">
          <h2>{{ item.title }}</h2>
          <p>{{ item.username }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
// import Scroll from '@/components/base/Scroll'
export default {
  props: {
    RecSongList: {
      type: Array
    }
  },
  computed: {
    ...mapState(['songList'])
  },
  methods: {
    // 将各个item传入函数 并跳转到对应的新路由
    ...mapMutations(['setSongList', 'setAlbum', 'setType']),
    selectAblum (item) {
      // 判断是歌单还是专辑
      if (item.content_id) {
        // 歌单
        this.setType('歌单')
        // 将item存入vuex中
        this.setSongList(item)
        this.$router.push('/songList/id=' + item.content_id)
      } else if (item.albumMID) {
        // 专辑
        this.setType('专辑')
        this.setAlbum(item)
        console.log(item)
        this.$router.push('/album/id=' + item.albumMID)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.recSongList {
  padding: 0 20px;
  li {
    display: flex;
    // text-align:center
    padding-bottom: 15px;
    .img {
      img {
        width: 60px;
        height: 60px;
      }
    }
    .msg {
      display: flex;
      min-width: 0;
      padding-left: 20px;
      flex-direction: column;
      justify-content: center;
      flex: 1;
      line-height: 20px;
      font-size: 14px;
      h2 {
        margin-bottom: 10px;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      p {
        color: #6d6d6d;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
